<!-- MessageGroup.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { NButton, NIcon, NCheckbox } from 'naive-ui'
import { FileText, Refresh, Trash } from '@vicons/tabler'
import UserMessage from '@/components/ChatInterface/UserMessage.vue'
import BotMessage from '@/components/ChatInterface/BotMessage.vue'
import type { MessageList } from './type'

// 使用上面定义的 Message 和 MessageList 类型

const props = defineProps<{
  id: number
  messageList: MessageList
  isReplying: boolean
  isAnalysisMode: boolean
  isShared: boolean
}>()

const emit = defineEmits<{
  (e: 'delete', messageId: number): void
  (e: 'showLog', messageId: number): void
  (e: 'regenerate', messageId: number): void
}>()

const isHovered = ref(false)
const isDeleting = ref(false)

const handleDelete = async () => {
  isDeleting.value = true
  // 模拟删除过程
  await new Promise((resolve) => setTimeout(resolve, 1000))
  emit('delete', props.id)
}

const handleShowLog = () => {
  emit('showLog', props.id)
}

const handleRegenerate = () => {
  emit('regenerate', props.id)
}

const itemClick = () => {
  if (props.isShared) {
    console.log('itemClick shared', props.id)
  }
}
</script>

<template>
  <div
    class="message-group mb-4 p-2 rounded-lg transition-all duration-300 relative"
    :class="{ 'bg-gray-100': isHovered }"
    @mouseenter="isHovered = true"
    @mouseleave="isHovered = false"
    @click="itemClick"
  >
    <div
      v-if="isDeleting"
      class="absolute inset-0 bg-gray-200 bg-opacity-50 flex items-center justify-center z-10"
    >
      <div class="loader"></div>
    </div>
    <template v-for="(message, index) in messageList.messages" :key="message.id">
      <UserMessage v-if="message.sender === 'user'" :message="message" @delete="handleDelete" />
      <BotMessage
        v-else
        :message="message"
        :loading="isReplying && index === messageList.messages.length - 1"
      />
    </template>
    <!-- 右上角工具栏 -->
    <div
      v-show="isHovered && !isShared"
      class="absolute flex space-x-2 bg-white rounded-lg shadow-md p-1 -top-4 right-8"
    >
      <div
        @click="handleShowLog"
        class="cursor-pointer text-gray-500 text-11px px-1 py-0.5 rounded-lg hover:bg-gray-200 flex items-center justify-center gap-2"
      >
        <NIcon :size="15" :component="FileText" /> 执行日志
      </div>
      <div
        @click="handleRegenerate"
        class="cursor-pointer text-gray-500 text-11px px-1 py-0.5 rounded-lg hover:bg-gray-200 flex items-center justify-center gap-2"
      >
        <NIcon :size="15" :component="Refresh" /> 重新回答
      </div>
      <div
        @click="handleDelete"
        class="cursor-pointer text-gray-500 text-11px px-1 py-0.5 rounded-lg hover:bg-gray-200 flex items-center justify-center gap-2 text-red-500"
      >
        <NIcon :size="15" :component="Trash" color="#f03e3e" /> 删除
      </div>
    </div>
    <div v-if="isShared" class="absolute left-2 top-2">
      <NCheckbox></NCheckbox>
    </div>
  </div>
</template>

<style scoped>
.loader {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
